<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    class="gui-bg-white"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">我的志愿表</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gFixedTop>
      <view class="gui-flex gui-column gui-bg-white gui-text-small">
        <view class="gui-bg-gray gui-flex gui-align-items-center gui-padding-small">
          <text>共填报：</text>
          <text>51所</text>
          <view class="gui-flex gui-margin-x gui-align-items-center">
            <gui-tags
              :border-radius="50"
              :custom-class="['gui-bg-orange', 'gui-color-white']"
              :size="22"
              style="margin-bottom: unset"
              text="冲：12"
            />
            <gui-tags :border-radius="50" :size="22" style="margin-bottom: unset" text="稳：23" />
            <gui-tags
              :border-radius="50"
              :custom-class="['gui-bg-green', 'gui-color-white']"
              :size="22"
              style="margin-bottom: unset"
              text="保：16"
            />
          </view>
        </view>
        <view class="gui-bg-gray" style="margin-top: 5rpx; padding: 20rpx 5rpx">
          <text>诊断建议：</text>
          <text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin</text>
        </view>
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-flex gui-column">
        <!--   数据列表     -->
        <gui-slide-list
          ref="slideRef"
          :btn-width="160"
          class="gui-flex1"
          :desc-ellipsis="false"
          :msgs="[1, 2, 3, 4, 5, 6, 7]"
          style="margin: 160rpx 0"
          :title-ellipsis="false"
          @scrolltolower="loadMore"
        >
          <template #content="{ row }">
            <view class="gui-bg-white gui-dark-bg-level-3 gui-box-shadow" style="margin-top: unset">
              <!--    学校信息      -->
              <view class="gui-flex gui-rows gui-nowrap">
                <!--            <image-->
                <!--              class="gui-card-img"-->
                <!--              mode="aspectFill"-->
                <!--              src="https://images.unsplash.com/photo-1663524789648-90fbdf8c8b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90"-->
                <!--            />-->
                <view
                  class="gui-border-radius-large gui-bg-orange3 gui-flex gui-align-items-center"
                  style="height: 60rpx; padding: 15rpx; margin-right: 12rpx"
                >
                  <text class="gui-color-orange gui-text-small gui-word-warp gui-text-center" style="width: 60rpx">录取概率</text>
                </view>
                <view class="gui-card-desc">
                  <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                    <text class="gui-card-name gui-primary-text">重庆大学</text>
                  </view>
                  <text class="gui-card-text gui-block gui-third-text">重庆 公办 本科</text>
                </view>
              </view>
              <!--    专业信息      -->
              <view class="gui-flex gui-rows gui-nowrap">
                <view class="gui-card-img" />
                <view class="gui-card-desc">
                  <view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
                    <text class="gui-card-name gui-primary-text">
                      <text>大数据专业</text>
                      <text class="gui-margin-x gui-color-gray gui-text-small">
                        <text>专业代码 A01</text>
                      </text>
                    </text>
                  </view>
                  <text class="gui-card-text gui-block gui-third-text">
                    <text>
                      （入学后部分课程采用英文教材和英语授课， 外语语种为非英语的考试请慎重报考。）（包
                      含专业：工商管理、市场营销、会计学、工业 工程、经济学）
                    </text>
                  </text>
                </view>
              </view>
            </view>
          </template>
          <template #rightButton="{ row }">
            <view class="gui-slide-btn gui-block gui-text-center gui-margin-x gui-flex gui-justify-content-center gui-align-items-center">
              <button
                class="gui-button-mini gui-noborder noborder"
                style="background-color: unset"
                type="default"
                @tap.stop="handleDelete(row)"
              >
                <text class="gui-icons gui-color-red gui-button-text-mini">删除</text>
              </button>
            </view>
          </template>
        </gui-slide-list>
      </view>
    </template>
    <template #gFooter>
      <view class="gui-flex gui-justify-content-end gui-border-t gui-padding gui-align-items-center gui-bg-white">
        <view v-if="importState">
          <button class="gui-button-mini gui-bg-orange3 gui-noborder gui-border-radius-full" type="default" @tap.stop="coverOld">
            <text class="gui-icons gui-color-orange gui-button-text-mini">覆盖原志愿表</text>
          </button>
        </view>
        <view class="gui-margin-x">
          <button class="gui-button-mini gui-bg-orange3 gui-noborder gui-border-radius-full" type="default" @tap.stop="download">
            <text class="gui-icons gui-color-orange gui-button-text-mini">下载报告</text>
          </button>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const pageRef = ref<any>(null)
const slideRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
const importState = ref<boolean>(false)
// 页码
const page = ref<number>(1)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)
// 覆盖原志愿
const coverOld = () => {
  console.log('覆盖原志愿：')
}
//  下载
const download = () => {
  console.log('下载：')
}
// 删除
const handleDelete = (e: any) => {
  console.log('删除：', e)
}
// 加载更多
const loadMore = () => {
  slideRef.value.startLoading()
  console.log('加载更多：')
  slideRef.value.endLoading()
}
onLoad((option) => {
  console.log(option)
  if (option?.import) {
    importState.value = true
  }
})
</script>
<style scoped>
/* 卡片视图 */
.gui-card-view {
  padding: 25rpx;
  margin-top: 30rpx;
}
.gui-card-body {
  padding-bottom: 30rpx;
}
.gui-card-img {
  width: 100rpx;
  height: 100rpx;
  border-radius: 80rpx;
}
.gui-card-desc {
  width: 400rpx;
  margin-left: 25rpx;
  flex: 1;
}
.gui-card-name {
  font-size: 28rpx;
  line-height: 40rpx;
  margin-right: 20rpx;
}
.gui-card-text {
  line-height: 40rpx;
  font-size: 24rpx;
}
.gui-card-footer {
  margin-top: 25rpx;
}
.gui-card-footer-item {
  width: 100rpx;
  text-align: center;
  flex: 1;
  line-height: 38rpx;
  font-size: 26rpx;
}
/* #ifndef APP-NVUE */
.gui-card-footer-item {
  display: block;
}
.gui-box-shadow {
  box-shadow: unset;
}
/* #endif */
/deep/ .gui-slide-list-content {
  width: 720rpx;
}
.noborder::after {
  border: unset !important;
}
</style>
